<template>
<!--一个聊天对话界面，左侧是商家，右侧是当前人，有头像、名称、时间-->
  <view class="chat">
    <view class="chat-content">
      <view class="chat-item" v-for="(item, index) in chatList" :key="index">
        <view class="chat-item-content" v-if="item.type === 1" :class="['left']">
          <view class="chat-item-content-avatar">
            <image style="width: 100%;height: 100%" :src="item.lawyer.image" mode="aspectFill"></image>
          </view>
          <view class="chat-item-content-text">
            <view class="chat-item-content-text-content">{{item.content}}</view>
          </view>
        </view>
        <view class="chat-item-content" v-else :class="['right']">
          <view class="chat-item-content-text">
            <span class="chat-item-content-text-content">{{item.content}}</span>
          </view>
          <view class="chat-item-content-avatar">
            <image style="width: 100%;height: 100%" :src="item.user.image" mode="aspectFill"></image>
          </view>
        </view>
      </view>
    </view>
    <view class="chat-input flex">
      <u-input class="flex-item" type="textarea" placeholder="请输入消息" v-model="content"></u-input>
      <button class="chat-input-btn" @click="send">发送</button>
    </view>
  </view>
</template>

<script>
export default {
  name: "chat",
data() {
    return {
      content: "",
      chatList: [

      ],
      lawyer_id: ''
    };
  },
  onLoad({ id }) {
    this.lawyer_id = id;
    this.getChatList();
  },
  methods: {
    scrollToBottom() {

    },
    getChatList() {
      this.$api.getChatList({
        lawyer_id: this.lawyer_id,
        user_id: uni.getStorageSync('user_id')
      }).then(res => {
        this.chatList = res.map(el => {
          return {
            ...el,
            user: el.user || {},
            lawyer: el.lawyer || {}
          }
        })
        console.log(this.chatList)
        this.content = ''
        this.$nextTick(() => {
          this.scrollToBottom();
        });
      });
    },
    send() {
      if (!this.content) {
        return;
      }
      this.$api.addChat({
        content: this.content,
        lawyer_id: this.lawyer_id,
        user_id: uni.getStorageSync('user_id')
      }).then(res => {
        this.getChatList()
      });
    },
  }
}
</script>

<style scoped lang="scss">
.chat {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .chat-content {
    flex: 1;
    overflow: auto;
    padding: 20rpx;
    background-color: #eeeeee;
    .chat-item {
      margin-bottom: 20rpx;
      .chat-item-content {
        display: flex;
        &.left {
          justify-content: flex-start;
          .chat-item-content-text {
            display: flex;
            margin-left: 10px;
            .chat-item-content-text-content {
              background-color: #ffffff;
              color: #333333;
            }
          }
        }
        &.right {
          justify-content: flex-end;
          .chat-item-content-text {
            display: flex;
            justify-content: flex-end;
            margin-right: 10px;
            .chat-item-content-text-content {
              background-color: #07c160;
              color: #333333;
            }
          }
        }
        .chat-item-content-avatar {
          width: 60rpx;
          height: 60rpx;
          margin-right: 10rpx;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .chat-item-content-text {
          flex-grow: 1;
          .chat-item-content-text-content {
            padding: 10rpx;
            border-radius: 10rpx;
            font-size: 28rpx;
            color: #333;
          }
        }
      }
    }
  }
  .chat-input {
    padding: 10rpx;
    input {
      padding: 10rpx;
      border-radius: 10rpx;
      border: 1px solid #999;
      margin-right: 10rpx;
    }
    .chat-input-btn {
      padding: 10rpx;
      border-radius: 10rpx;
      background-color: #07c160;
      color: #fff;
    }
  }
}

</style>
